<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
    <head>
        <meta charset="utf-8"> 
        <title>工艺路线</title>
        <link th:href="@{~/css/styles.css}" rel="stylesheet" />
        <link rel="stylesheet" th:href="@{~/css/innerstyle.css}">
        <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	    <link rel="stylesheet" type="text/css" th:href="@{~/DataTables/datatables.min.css}"/>
        <script type="text/javascript" th:src="@{~/DataTables/datatables.min.js}"></script>
        <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script>
            $(function () {
                $("#add_button").click(function () {
                    var processId = $("#processSelect").find("option:selected").val()
                    var productId = $("#productId").val()
                    url = "/design/add/"+productId+"/"+processId
                    $.ajax({
                        //几个参数需要注意一下
                        type: "Get",//方法类型
                        dataType: "json",//预期服务器返回的数据类型
                        url: url ,//url
                        data: {},
                        success: function (data) {
                            if (data.statue== "0") {
                                alert("添加成功！");
                                window.location.reload()
                            }else{
                                alert("添加失败...");
                            }
                        },
                        error : function() {
                            alert("发送异常...");
                        }
                    });
                })
                $(".delete_button").click(function () {
                    var url = $(this).attr("delete_url")
                    if(confirm("确定删除？")){
                        $.ajax({
                            //几个参数需要注意一下
                            type: "Get",//方法类型
                            dataType: "json",//预期服务器返回的数据类型
                            url: url ,//url
                            data: {},
                            success: function (data) {
                                if (data.statue== "0") {
                                    alert("删除成功！");
                                    window.location.reload()
                                }else{
                                    alert("删除失败...");
                                }
                            },
                            error : function() {
                                alert("发送异常...");
                            }
                        });
                    }

                })
            })
        </script>
    </head>
    <body class="sb-nav-fixed">
    <div th:replace="bar::topbar"></div>
    <div id="layoutSidenav">
        <div th:replace="bar::#layoutSidenav_nav"></div>
        <div id="layoutSidenav_content">
    <div class="mainborder">
        <div class="row">
            <div>
                <h1>工艺路线</h1>
                <button shiro:hasPermission="user:admin" type="submit" class="btn btn-danger" style="float: right ;" data-toggle="modal" data-target="#myModal">添加工艺</button>
                
                
            </div>
        </div>
        <div class="form-group">
            <label >产品名称</label>
            <input class="form-control" id="productName" type="text" placeholder="" disabled th:value="${product.productName}">
        </div>
        <div class="form-group">
            <label >产品编号</label>
            <input class="form-control" id="productId" type="text" placeholder="" disabled th:value="${product.productId}">
        </div>
        <div class="form-group">
            <label >开发时间</label>
            <input class="form-control" id="createdDate" type="text" placeholder="" disabled th:value="${#dates.format(product.createdDate,'yyyy/MM/dd')}">
        </div>
        <form role="form" id="designFrom">
            <div id="form-group" >
                <label >产品工艺</label>
                <table id="myTable" class="table table-bordered">
                    <thead>
                        <tr>
                            <th>工艺序号</th>
                            <th>工艺名称</th>
                            <th shiro:hasPermission="user:admin">操作</th>
                        </tr>
                    </thead>
                    <tbody>


                        <tr th:each="design,designStart:${designs}">
                            <td th:text="${designStart.count}"></td>
                            <td th:text="${design.processName}"></td>

                            <td shiro:hasPermission="user:admin">
                                <button shiro:hasPermission="user:admin" type="button" class="btn btn-danger delete_button" th:attr="delete_url=@{/design/delete/}+${design.productId}+@{/}+${design.order}">删除</button>
                            </td>
                        </tr>

    
                    </tbody>
                </table>
            </div>
        </form>
        <!-- 模态框（Modal） -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">

                        <h4 class="modal-title" id="myModalLabel">
                            添加工艺
                        </h4>

                    </div>
                    <div class="modal-body">
                        <forn role="form" id="designAddForm">
                            <div>
                                <div class="form-group">
                                    <label >工艺名称</label>
                                    <select class="form-control" id="processSelect">
                                        <option th:each="process:${processes}" th:text="${process.processName}"
                                        th:value="${process.processId}"></option>
                                    </select>
                                </div>
                            </div>
                        </forn>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                        </button>
                        <button type="button" id="add_button" class="btn btn-danger" data-dismiss="modal">
                            确认
                        </button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>

    </div>
        </div>
    </div>
    
    <script>
        $(document).ready( function () {
            $('#myTable').DataTable({
                "bFilter": false,
                "bLengthChange": false,
                "oLanguage": {
                    "sProcessing": "正在加载中......",
                    "sLengthMenu": "每页显示 _MENU_ 条记录",
                    "sZeroRecords": "对不起，查询不到相关数据！",
                    "sEmptyTable": "表中无数据存在！",
                    "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",
                    "sInfoFiltered": "数据表中共为 _MAX_ 条记录",
                    "sSearch": "搜索",
                    "oPaginate": {
                        "sFirst": "首页",
                        "sPrevious": "上一页",
                        "sNext": "下一页",
                        "sLast": "末页"
                    }
                }
            });
        } );

        
    </script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
    <script th:src="@{~/js/scripts.js}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js" crossorigin="anonymous"></script>
    <script th:src="@{~/assets/demo/chart-area-demo.js}"></script>
    <script th:src="@{~/assets/demo/chart-bar-demo.js}"></script>
    <script src="https://cdn.jsdelivr.net/npm/simple-datatables@latest" crossorigin="anonymous"></script>
    <script th:src="@{~/js/datatables-simple-demo.js}"></script>
</body>
</html>
